<template>
  <div class="hover-click-button-wrapper" :class="{colorBlue: ifSelect}">
    <slot></slot>
    <div class="hover" :class="{select: ifSelect}"></div>
  </div>
</template>

<script>
  export default {
    props: {
      ifSelect: {
        type: Boolean,
        default: () => false
      },
    },
  }
</script>

<style lang="less" scoped>
@w: var(--hoverClickButtonWidth);
@h: var(--hoverClickButtonHeight);
@fs: var(--hoverClickButtonFontsize);

.hover-click-button-wrapper {
  position: relative;
  width: @w;
  height: @h;
  
  line-height: @h;
  text-align: center;
  font-size: @fs;

  &:hover {
    cursor: pointer;
  }

  .hover {
    display: none;

    position: absolute;
    left: 0;
    top: 0;

    width: calc(@w * 0.01);
    height: @h;

    background-color: var(--blue);
    
    transition: .3s;
    pointer-events: none;
  }

  &:hover .hover {
    display: block;
  }

  .select {
    display: block;
    width: @w;
    opacity: .1;
  }
}
</style>